<template>
  <div class="roll-tree hide-scrollbar">
    <Tree :data="data" @on-select-change="onSelectChange"></Tree>
  </div>
</template>

<script>
  export default {
    name: "rollTree",
    data() {
      return {
        data: [],
        show: false,
      }
    },
    props: {
      id: {
        type: [Number,String],
        default: ''
      },
      treeList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    mounted() {
      let routers = JSON.parse(JSON.stringify(this.treeList))
      this.readNodes(routers);
      this.data = routers;
    },
    methods: {
      readNodes(nodes = [], arr = []) {
        for (let item of nodes) {
          arr.push(item)
          item.title = item.name;
          item.selected = false;
          item.expand = true;
          if (item.id == this.id) {
            item.selected = true;
          }
          if (item.children && item.children.length) this.readNodes(item.children, arr)
        }
        return arr
      },
      onSelectChange(rows, row) {
        this.$emit('onSelectChange', row);
      },
    }
  }
</script>

<style scoped lang="less">
  .roll-tree{
    max-height: 80vh;
    overflow-y: scroll;
  }
  .roll-tree::-webkit-scrollbar{
    display:none;
  }
</style>
